(function() {
    let couponId = location.search.slice(1).split('=')[1];
    // console.log(couponId);
    fetch('http://chst.vip:1234/api/getcouponproduct?couponid=' + couponId).then(body => body.json()).then(res => {
        let result = res.result;
        // console.log(result);
        let couponStr = '';
        let slideStr = '';
        result.forEach(item => {
            couponStr += `
            <li date-proid="${item.couponProductId}">
                <a href="#">
                    <div class="img">
                       ${item.couponProductImg}
                    </div>
                    <div class="con">
                        <h2>${item.couponProductName}</h2>
                        <div class="price">${item.couponProductPrice}</div>
                        <span class="time">${item.couponProductTime}</span>
                    </div>
                </a>
            </li>
            `;
            slideStr += `
            <li> ${item.couponProductImg}</li>
            `
        });
        $('.prolis').html(couponStr);
        $('.slide').html(slideStr);
    });
    let maxIndex = $('.slide li').length;


    console.log(maxIndex);
    $('.prolis').on('click', 'li', function() {
        let imgIndex = $(this).attr('date-proid');
        let imgWidth = parseInt($('.slide li').css('width'))
        console.log(imgWidth);
        slide(imgIndex, imgWidth);
        autoPlay()
        $('.mask').slideDown(500);
        $('html,body').css({ overflow: 'hidden' });
        //按钮点击事件
        $('#prev').on('click', function() {
            clearInterval(slide.interval);
            if (imgIndex < 0) {
                $('.slide').css({ left: -(maxIndex * imgWidth) });
                imgIndex = maxIndex - 2
            } else {
                imgIndex--;
            }
            slide(imgIndex, imgWidth)
        });
        $('#next').on('click', function() {
            clearInterval(slide.interval);
            if (imgIndex == maxIndex) {
                $('.slide').css({ left: 0 })
                imgIndex = 1;
            } else {
                imgIndex++;
            }
            slide(imgIndex, imgWidth)
        });
    });

    $('.close').on('click', function() {
        $('.mask').slideUp(500);
        $('html,body').css({ overflow: 'auto' });
    });

    function slide(imgIndex, imgWidth) {

        let firstLi = $('.slide li').first().clone();
        $('.slide').append(firstLi);
        $('.slide').stop().animate({ left: -(imgWidth * imgIndex) });
    };

    function autoPlay() {
        clearInterval(slide.interval);
        slide.interval = setInterval(() => {
            $('#next').click()
        }, 3000)
    };
})()